<template>
    <el-container>
        <el-aside width="200px">
            <el-menu router>
                <div class="title">通用后台管理系统</div>
                <el-menu-item index="home">
                    <el-icon>
                        <House />
                    </el-icon>
                    <span>首页</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <el-icon>
                        <Document />
                    </el-icon>
                    <span>系统概览</span>
                </el-menu-item>
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item-group title="管理员管理">
                        <el-menu-item index="1-1">产品管理员</el-menu-item>
                        <el-menu-item index="1-2">用户管理员</el-menu-item>
                        <el-menu-item index="1-2">消息管理员</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="员工管理">
                        <el-menu-item index="1-3">用户列表</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
                <el-sub-menu index="3">
                    <template #title>
                        <el-icon>
                            <TakeawayBox />
                        </el-icon>
                        <span>产品管理</span>
                    </template>
                    <el-menu-item-group title="入库管理">
                        <el-menu-item index="3-1">产品列表</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="出库管理">
                        <el-menu-item index="3-2">出库列表</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
                <el-sub-menu index="4">
                    <template #title>
                        <el-icon>
                            <ChatDotRound />
                        </el-icon>
                        <span>消息管理</span>
                    </template>
                    <el-menu-item index="4-1">信息列表</el-menu-item>
                    <el-menu-item index="423">回收站</el-menu-item>
                </el-sub-menu>
                <el-menu-item index="5">
                    <el-icon>
                        <FolderOpened />
                    </el-icon>
                    <span>合同管理</span>
                </el-menu-item>
                <el-menu-item index="6">
                    <el-icon>
                        <DocumentCopy />
                    </el-icon>
                    <span>操作日志</span>
                </el-menu-item>
                <el-menu-item index="7">
                    <el-icon>
                        <DataLine />
                    </el-icon>
                    <span>登录日志</span>
                </el-menu-item>
                <el-menu-item index="8">
                    <el-icon>
                        <Setting />
                    </el-icon>
                    <span>系统设置</span>
                </el-menu-item>
                <el-menu-item index="/user">
                    <el-icon>
                        <Setting />
                    </el-icon>
                    <span>个人中心</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header class="header">
                <div class="left">
                    <p>尊敬的<span>{{ userinfo.name }}</span>欢迎您登录本系统</p>
                </div>
                <div class="right">
                    <el-icon>
                        <Message />
                    </el-icon>
                    <div class="img" v-if="!userinfo">王</div>
                    <img :src="userinfo.image_url" alt="" class="img">
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            设置
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="text">Action 1</el-dropdown-item>
                                <el-dropdown-item>Action 2</el-dropdown-item>
                                <el-dropdown-item @click="gologin">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <el-main>
                <RouterView></RouterView>
            </el-main>
        </el-container>
    </el-container>
</template>
<script setup>
import router from '@/router';
import { ref } from 'vue';
import { Userstore } from '@/stores/user';
const userstore = Userstore()
const userinfo =userstore.userinfo || {}
const gologin = ()=>{
    router.push('/login')
}
const text =()=>{
    const aaa=JSON.stringify(userstore.userinfo)
    console.log(aaa);
}
</script>
<style scoped lang="scss">
.el-aside {
    height: 100vh;
    background-color: #2b303b;
    width: 210px;

    .el-menu {
        width: 210px;
        height: 100vh;
        background-color: #2b303b;
        color: black;
        overflow: hidden;
        border: 0;
    }

    .title {
        padding: 20px;
        display: flex;
        justify-content: center;
        color: #fff;
        background-color: #2b303b;
    }
}

.header {
    background-color: #2b303b;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .right {
        width: 100px;
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .img {
            width: 20px;
            height: 20px;
            border-radius: 40%;
            color: black;
            background-color: #fff;
            text-align: center;
        }
        .el-dropdown-link {
            margin: 0 5px;
        }
    }
}

.el-menu-item {
    color: #fff;
    background-color: #2b303b;
}

.el-menu-item:hover {
    background-color: #006eff;
}

:deep(.el-sub-menu__title:hover) {
    background-color: #006eff;
}

:deep(.el-sub-menu__title) {
    color: #fff;
}

:deep(.el-menu-item-group__title) {
    background-color: #2b303b;
}
</style>